<!-- wyf 2022-1-20 -->
<template>
  <div :ref="inputRef" class="search-input">
    <div v-if="inptType === 'textarea'" class="ipt-div" :class="arr && arr[0] && 'hasval'" @mousewheel="tagScroll">
      <input ref="myInput" autocomplete="off" name="myInput" type="hidde" class="my-input" @blur="blurMultiIpt" @keydown.enter.stop="$refs.myInput.blur()">
      <div class="text-hid-wrapper" style="width: 100%; height: 32px; position: relative; overflow:hidden" @click="DelegateAdd">
        <div v-if="!isfocus" ref="contentwrap" class="content-wrap" @dblclick="handleDelegate">
          <span
            v-for="(tag, i ) in arr"
            :key="tag+'_'+i"
            class="el-tag"
            @click.stop
            @dblclick.stop="delTxtItem(tag, i, $event)"
          >{{ tag }}&nbsp;&nbsp; <span class="tag-delete-icon" @click.stop="delTxtItem(tag, i, $event)">x</span></span>
        </div>
      </div>
      <span ref="icon" style="font-style: normal;" class="icon el-icon-close" @click="reset">X</span>
      <div v-if="isfocus && (arr.length>0 || tempTxtArr.length>0)" ref="tagwrap" class="tag-wrap" @click.stop="delegateDelete">
        <span
          v-for="(tag, i ) in tempTxtArr"
          :key="tag+'_'+i"
          class="el-tag"
          closable
          style="white-space: nowrap; margin-right: 8px; margin-bottom: 8px; cursor: pointer;"
          @click.stop
          @dblclick.stop="delTxtItem(tag, i)"
          @close.self.stop="delTxtItem(tag, i)"
        >
          {{ tag }}&nbsp;&nbsp; <span class="tag-delete-icon" @click.stop="delTxtItem(tag, i, $event)">x</span>
        </span>
      </div>
    </div>
    <div v-else class="ipt-div ipt-div2" :class="arr && arr[0] && 'hasval'">
      <input
        ref="mytxtInput"
        autocomplete="off"
        name="mytxtInput"
        :disabled="disabled"
        :placeholder="placeholder || 请输入"
        :allow-clear="allowClear"
        :default-value="defaultValue"
        class="my-input my-input2"
        :value="value"
        @keydown.enter.stop="$refs.mytxtInput.blur()"
        @change="changeText($event,'text')"
      >
      <i ref="icon" style="font-style: normal;" class="icon el-icon-close" @click="reset">X</i>
    </div>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'
export default defineComponent({
  name: 'ZInputMulti',
  props: {
    inputRef: {
      type: String,
      default: 'inputRef'
    },
    value: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    mode: {
      type: String,
      default: 'text'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    allowClear: {
      type: Boolean,
      default: false
    },
    defaultValue: {
      type: String,
      default: undefined
    }
  },
  setup(props, _ref) {
    const iptValue = computed({
      get() {
        return props.value
      },
      set(val) {
        _ref.emit('updateValue', val)
      }
    })
    let inptType = computed({
      get() {
        return props.mode
      },
      set(val) {
        _ref.emit('updateMode', val)
      }
    })
    let arr = computed({
      get() {
        if (!props.value) {
          return []
        }
        return props.mode === 'textarea' ? Array.isArray(props.value) ? props.value : props.value.split(',') : []
      },
      set(val) {
        var v = Array.isArray(val) ? val.join(',') : val
        _ref.emit('updateValue', v)
      }
    })
    return {
      arr,
      iptValue,
      inptType,
      isfocus: false,
      tempTxtArr: null
    }
  },
  methods: {
    changeText(e) {
      this.iptValue = e.target.value
      // 由compute的set做了emit
      // this.$emit('updateValue', e.target.value)
    },
    reset(e) {
      this.iptValue = ''
      this.arr = []
      this.tempTxtArr = null
      this.inptType = 'text'
      this.$refs.mytxtInput && (this.$refs.mytxtInput.value = '')
      this.$refs.myInput && (this.$refs.myInput.value = '')
      // this.$emit('updateValue', undefined)
    },
    delTxtItem(item, idx, e) {
      e.stopPropagation()
      //  e.preventDefault()
      var arr = JSON.parse(JSON.stringify(this.arr))
      arr.splice(idx, 1)
      this.arr = arr
      this.tempTxtArr = JSON.parse(JSON.stringify(arr))
      // 会触发arr的set吗
      if (this.arr.length === 0) {
        this.inptType = 'text'
      }
      // 转成字符串输出
      // this.$emit('updateValue', this.arr.join(','))
      this.$forceUpdate()
    },
    handleDelegate(e) {
      if (e.target.className.indexOf('el-tag') !== -1) {
        let index = this.arr.findIndex(a => a === e.target.innerText.trim())
        this.delTxtItem(null, index)
      }
    },
    DelegateAdd(e) {
      if (e.target.className.indexOf('el-tag') === -1) { // 点中了非tag
        this.addTxtItem(e)
      }
    },
    addTxtItem(e) {
      this.tempTxtArr = JSON.parse(JSON.stringify(this.arr))
      this.arr = []
      if (this.inptType === 'textarea') {
        this.$refs.myInput.focus()
        this.$refs.myInput.style.zIndex = 10
        this.$refs.myInput.value = ''
        this.isfocus = true
      }
    },
    blurMultiIpt(e) {
      if (e.target.value) {
        // this.arr = JSON.parse(JSON.stringify(this.tempTxtArr)) || []
        this.arr = (JSON.parse(JSON.stringify(this.tempTxtArr)) || []).concat(e.target.value)
        this.arr.push(e.target.value)
        this.isfocus = false
        this.$refs.myInput.style.zIndex = -1
      } else {
        this.arr = JSON.parse(JSON.stringify(this.tempTxtArr)) || []
        this.isfocus = false
        this.$refs.myInput.style.zIndex = -1
      }
    },
    tagScroll(e) {
      if (this.isfocus) {
        return
      }
      let width = parseInt(this.$refs.contentwrap.getBoundingClientRect().width)
      if (width < 250) {
        return
      }
      let x = this.x
      if (x > (-width * 9 / 10) && x < 0) {
        if (e.wheelDelta < 0) {
          x = Math.abs(x) + parseInt(width / 10)
          x = -x
        } else {
          x = x + parseInt(width / 10)
        }
      } else {
        if (e.wheelDelta < 0) {
          x = -parseInt(width * 3 / 4)
        } else {
          x = 0
        }
      }
      this.x = x
      this.$refs.contentwrap.style.transform = `translateX(${x}px)`
    }
  }
})
</script>

<style lang="less" scoped>
.ipt-div {
  position: relative;
  border: 1px solid #E1E5EB;
  line-height: 32px;
  padding-right: 20px;
  padding-left: 8px;
  height: 32px;
  flex: 7;
  &:hover {
    border-color: #BCC2CC;
  }
  .el-tag {
    border: 1px solid #E1E5EB;
    background-color: #f8f9fa;
    color: #2A2E33;
    height: 22px;
    padding: 0 8px;
    line-height: 22px;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 12px;
  }
  .tag-delete-icon {
    font-size: 12px;
    font-style:normal;
    cursor: pointer;
    position: relative;
    top: -1px;
  }
  .my-input {
    position: absolute;
    min-height: 30px;
    width: 100%;
    left: 0;
    top: 0;
    height: 96%;
    padding-left: 10px;
    z-index: -1;
    box-sizing: border-box;
    border: 1px solid #2B71FC;
    outline: #2B71FC;
    &:not(:placeholder-shown):hover+.icon  {
      visibility: visible;
    }
    ::-webkit-input-placeholder {
      color: #BCC2CC;
      font-size: 14px;
    }
  }
  .my-input2 {
    border: 0;
    z-index: 50;
    padding-right: 20px;
    outline-color: #2B71FC;
    outline-width: 1px;
    outline-offset: 1px;
  }
  .text-hid-wrapper { z-index: 5;}
  .tag-wrap, .content-wrap {
    position: absolute;
    z-index: 100;
    overflow-x: auto;
    top: 0%;
    left: -1px
  }
  .content-wrap{
    height: 30px;
    line-height: 30px;
    width: fit-content;
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
  }
  .tag-wrap {
    padding: 9px 8px;
    top: 100%;
    height: fit-content;
    width: 100%;
    z-index: 1300;
    display: block;
    padding: 10px;
    border: 1px solid #E1E5EB;
    background: #fff;
    .el-tag {
      float: left
    }
  }
  .icon {
    position: absolute;
    right: 5px;
    top: 12px;
    z-index: 52;
    width: 15px;
    height: 15px;
    line-height: 15px;
    display: inline-block;
    text-align: center;
    visibility: hidden;

    &:hover {
      color: #fff;
      background: #F0F2F5;
      border-radius: 50%;
      cursor: pointer;
      }
  }
}
.inp-btn {
  flex: 1;
}
</style>
